<template>

    <div class="common-content-wrapper label-management-wrapper">
      <el-menu mode="vertical" :default-active="leftActiveNav" theme="dark" @select="handleNavSelected"
               class="label-management-left-nav">
        <el-menu-item index="knowledge-point-management"><i class="el-icon-message"></i>知识点管理</el-menu-item>
      </el-menu>

      <div class="label-management-content">

        <div class="knowledge-point-content">

          <div>
            <el-tag>科目：</el-tag>
            <span class="knowledge-point-management-common" v-for="(item, index) in subjectItems" :class="item.id === subject ? 'currentSubject' : 'subject-item'" v-text="item.value" :key="item.id" @click="handleClickSubjectItem(item.id)"></span>
          </div>

          <div style="margin-top: 15px;">
            <el-tag>年级：</el-tag>
            <span class="knowledge-point-management-common" v-for="(item, index) in gradeItems" :class="item.id === grade ? 'currentGrade' : 'grade-item'" v-text="item.value" :key="item.id" @click="handleClickGradeItem(item.id)"></span>
          </div>

          <div class="tree-node-wrapper">

            <div class="tree-node-wrapper-1">
              <div style="text-align: right;height: 30px;">
                <i class="el-icon-plus knowledge-point-operate-icon knowledge-point-operate-icon-create"></i>
                <i class="el-icon-edit knowledge-point-operate-icon knowledge-point-operate-icon-edit"></i>
                <i class="el-icon-delete knowledge-point-operate-icon knowledge-point-operate-icon-delete"></i>
              </div>
              <div class="tree tree-1"></div>
            </div>

            <div class="tree-node-wrapper-2">
              <div style="text-align: right;height: 30px;">
                <i class="el-icon-plus knowledge-point-operate-icon knowledge-point-operate-icon-create"></i>
                <i class="el-icon-edit knowledge-point-operate-icon knowledge-point-operate-icon-edit"></i>
                <i class="el-icon-delete knowledge-point-operate-icon knowledge-point-operate-icon-delete"></i>
              </div>
              <div class="tree tree-2"></div>
            </div>

            <div class="tree-node-wrapper-3">
              <div style="text-align: right;height: 30px;">
                <i class="el-icon-plus knowledge-point-operate-icon knowledge-point-operate-icon-create"></i>
                <i class="el-icon-edit knowledge-point-operate-icon knowledge-point-operate-icon-edit"></i>
                <i class="el-icon-delete knowledge-point-operate-icon knowledge-point-operate-icon-delete"></i>
              </div>
              <div class="tree tree-3"></div>
            </div>

          </div>
        </div>
      </div>
    </div>

</template>
<style lang="less">
  .label-management-wrapper{
    overflow: auto;
    margin-top: 60px;
    height: 100%;
    .label-management-left-nav {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      position: fixed;
      top: 61px;
      left: 0;
      bottom: 0;
      width: 160px;
      height: 100%;

      .el-menu-item {
        padding-left: 30px !important;
      }

    }
    .label-management-content{
      margin-left: 170px;
      margin-top: 20px;
    }
    .knowledge-point-management-common{
      margin-top:1px;
      display: inline-block;
      width: 75px;
      height: 25px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: #E5E9F2;
      margin-left: 10px;
      text-align: center;
      line-height:25px;
      cursor: pointer;
      transition: all 0.2s;
      &:hover{
        background-color: #58B7FF;
        color: #ffffff;
      }
    }
    .currentSubject {
      background-color: #58B7FF;
      color: #ffffff;
    }
    .currentGrade {
      background-color: #58B7FF;
      color: #ffffff;
    }
    .tree-node-wrapper > div{
      float: left;
      width: 320px;
      height: 500px;
      margin-top: 20px;
    }
    .tree {
      border:1px solid #D3DCE6;
      height: 470px;
    }
    .tree-node-wrapper-1{
      margin-left: 62px;
    }
    .tree-node-wrapper-2{
      margin-left: 20px;
    }
    .tree-node-wrapper-3{
      margin-left: 20px;
    }
    .knowledge-point-operate-icon{
      font-size: 20px;
      cursor: pointer;
      margin-right: 10px;
    }

    .knowledge-point-operate-icon-create{
      color: #13CE66;
    }
    .knowledge-point-operate-icon-edit{
      color: #20A0FF;
    }
    .knowledge-point-operate-icon-delete{
      color: #FF4949;
    }
  }
</style>
<script>
    export default {
      data () {
        return {
          leftActiveNav: 'knowledge-point-management',
          subject: 'PHILOLOGY',
          grade: 'ONE',
          parentId: ''
        }
      },
      methods: {
        handleNavSelected () {

        },
        getKnowledgePoints (index = 1) {
          let subject = this.subject
          let grade = this.grade
          let parentId = this.parentId
          let level = index
          this.$store.dispatch('FETCH_KNOWLEDGE_POINTS', { subject, grade, parentId, level })
        },
        handleClickSubjectItem (subjectId) {
          console.log(subjectId)
          this.subject = subjectId
          this.getKnowledgePoints('1')
        },
        handleClickGradeItem (gradeId) {
          this.grade = gradeId
          this.getKnowledgePoints('1')
        }
      },
      components: {

      },
      computed: {
        subjectItems () {
          return this.$store.state.dictionary.subject
        },
        gradeItems () {
          return this.$store.state.dictionary.grade
        },
        knowledgePoints () {
          return this.$store.state.labelManagementStore.knowledgePoints
        }
      },
      mounted () {

      }
    }
</script>
